<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.MODAL.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-modal</h3>
        <p>{{'COMPONENT.MODAL' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>header</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>visible</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>theme</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>type</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>spinner</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>delay</free-table-cell>
              <free-table-cell>
                <ng-template><code>Number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>dismissMask</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.MODAL.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>

      <h3 class="free-head-title">{{'EVENT' | translate}}</h3>
      <div class="free-demo-row">
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onChange</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.MODAL.EVENTS.0' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;ModalModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="open()">Modal</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal header="Modal" [(visible)]="visible"&gt;
                &lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;
                &lt;f-footer&gt;
                  &lt;button type="button" class="btn-default btn"&gt;close&lt;/button&gt;
                &lt;/f-footer&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Theme</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton theme="primary" (click)="blueVisible = !blueVisible">Modal</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal header="Modal Theme" theme="primary" [(visible)]="blueVisible"&gt;
              &lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;
                &lt;f-footer&gt;
                  &lt;button type="button" class="btn-default btn"&gt;close&lt;/button&gt;
                &lt;/f-footer&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Alert</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="alertVisible = !alertVisible">Modal</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal header="Alert" type="alert" [(visible)]="alertVisible"&gt;
              &lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Confirm</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="confirmVisible = !confirmVisible">Modal</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal header="Confirm" type="confirm" [(visible)]="confirmVisible"&gt;
              &lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Prompt</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="promptVisible = !promptVisible">Modal</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal header="Prompt" type="confirm" [(visible)]="promptVisible"&gt;
                &lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;&lt;p&gt;Some contents...&lt;/p&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Loading</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="Loading = !Loading">Loading</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal spinner="circleLineSpin" [(visible)]="loading"&gt;&lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Delay</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <button fButton (click)="delayLoading = !delayLoading">Loading</button>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-modal spinner="lineSquare" [delay]="1500" [(visible)]="delayLoading"&gt;
              &lt;/free-modal&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>

  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
  <free-modal header="Modal" [(visible)]="visible" (onChange)="onChange($event)" [size]="'sm'">
    <p>Some contents...</p><p>Some contents...</p><p>Some contents...</p>
    <f-footer>
      <button fButton (click)="visible = !visible">cancel</button>
    </f-footer>
  </free-modal>

  <free-modal header="Modal Theme" theme="primary" [(visible)]="blueVisible">
    <p>Some contents...</p><p>Some contents...</p><p>Some contents...</p>
    <f-footer>
      <button fButton class="cancel">cancel</button>
    </f-footer>
  </free-modal>

  <free-modal header="Alert" type="alert" [(visible)]="alertVisible">
    Are you sure?
  </free-modal>

  <free-modal header="Confirm" type="confirm" [(visible)]="confirmVisible">
    Are you sure?
  </free-modal>

  <free-modal header="Prompt" type="prompt" [(visible)]="promptVisible" (onChange)="onChange($event)"></free-modal>

  <free-modal spinner="circleLineSpin" [(visible)]="Loading"></free-modal>

  <free-modal spinner="lineSquare" [delay]="1500" [(visible)]="delayLoading"></free-modal>
</div>
